<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>币种管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button size="mini" type="primary" @click="AddCoin"
        >添加币种</el-button
      >
      <!-- 数据列表 -->
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="tokenEn" label="币名称"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="tokenLogo" label="币logo">
          <template slot-scope="scope">
            <img :src="scope.row.tokenLogo" style="width: 64px" />
          </template>
        </el-table-column>
        <el-table-column prop="tokenGains" label="币涨幅"> </el-table-column>
        <el-table-column prop="tokenPrice" label="币单价"> </el-table-column>
        <el-table-column prop="tokenPriceUnit" label="单位单价">
        </el-table-column>
        <el-table-column label="修改币信息">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="changeCoin(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
     
      </el-pagination> -->
    </el-card>
    <!-- 添加币种-->
    <el-dialog title="修改币信息" :visible.sync="AdddialogTableVisible">
      <el-row :gutter="20">
        <el-col :span="5">币名称</el-col>
        <el-col :span="18">
          <el-input v-model="formList.tokenEn" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <!-- <el-alert title="提示（状态）：1：上架，0：下架" type="success"> </el-alert>
      <el-row :gutter="20">
        <el-col :span="5">状态</el-col>
        <el-col :span="18">
          <el-input v-model="formList.status" placeholder="请输入"></el-input>
        </el-col>
      </el-row> -->
      <!-- <el-row :gutter="20">
        <el-col :span="5">汇总地址</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.hzAddress"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">合约地址</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.contactAddress"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">合约method_id</el-col>
        <el-col :span="18">
          <el-input v-model="formList.methodId" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 以太坊单位</el-col>
        <el-col :span="18">
          <el-input v-model="formList.unit" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">超过多少进行汇总</el-col>
        <el-col :span="18">
          <el-input v-model="formList.hzNum" placeholder="请输入"></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="5">币logo</el-col>
        <el-col :span="18">
          <!-- <el-input
            v-model="formList.tokenLogo"
            placeholder="请输入"
          ></el-input> -->
          <el-upload
            class="upload-demo"
            action="https://up-z2.qiniup.com"
            :data="QnFileForm"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="queryinfo.imgList"
          >
            <el-button size="small" type="primary">点击上传图片</el-button>
            <div slot="tip" class="el-upload__tip">上传图片，且不超过500kb</div>
          </el-upload>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 币单价</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tokenPrice"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 是否在链上</el-col>
        <el-col :span="18">
          <el-switch
            v-model="formList.isL"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">外部是否可提</el-col>
        <el-col :span="18">
          <el-switch
            v-model="formList.isTb"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="5"> 提币地址(请联系管理员)</el-col>
        <el-col :span="18">
          <el-input
          disabled
            v-model="formList.tbAddress"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row> -->
      <!-- <el-row :gutter="20">
        <el-col :span="5">提币私匙(请联系管理员)</el-col>
        <el-col :span="18">
          <el-input disabled v-model="formList.tbKey" placeholder="请输入"></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="5">提到外部的手续费</el-col>
        <el-col :span="18">
          <el-input v-model="formList.tbSxf" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-alert title="提示：1：%，0：固定值" type="success"> </el-alert>
      <el-row :gutter="20">
        <el-col :span="5">外部手续费类型</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tbSxfType"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">内部是否可提</el-col>
        <el-col :span="18">
          <el-switch
            v-model="formList.isNbTb"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 提到内部的手续费</el-col>
        <el-col :span="18">
          <el-input v-model="formList.nbSxf" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-alert title="提示：1：%，0：固定值" type="success"> </el-alert>
      <el-row :gutter="20">
        <el-col :span="5">内部手续费类型</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.nbSxfType"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">自动提币审核的额度 </el-col>
        <el-col :span="18">
          <el-input v-model="formList.zdShNum" placeholder="请输入"></el-input>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">单价单位</el-col>
        <el-col :span="18">
          <el-select v-model="formList.tokenPriceUnit" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 提币时间段</el-col>
        <el-col :span="18">
          <el-input v-model="formList.tbTime" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">提币最小最大值 </el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tbInterval"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">币涨幅 </el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tokenGains"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Addsubmit">提交</el-button>
      </span>
    </el-dialog>
    <!-- 修改币信息 @close="colseDialog"-->
    <el-dialog title="修改币信息" :visible.sync="dialogTableVisible">
      <el-row :gutter="20">
        <el-col :span="5">币名称</el-col>
        <el-col :span="18">
          <el-input v-model="formList.tokenEn" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <!-- <el-alert title="提示（状态）：1：上架，0：下架" type="success"> </el-alert>
      <el-row :gutter="20">
        <el-col :span="5">状态</el-col>
        <el-col :span="18">
          <el-input v-model="formList.status" placeholder="请输入"></el-input>
        </el-col>
      </el-row> -->
      <!-- <el-row :gutter="20">
        <el-col :span="5">汇总地址</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.hzAddress"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">合约地址</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.contactAddress"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">合约method_id</el-col>
        <el-col :span="18">
          <el-input v-model="formList.methodId" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 以太坊单位</el-col>
        <el-col :span="18">
          <el-input v-model="formList.unit" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">超过多少进行汇总</el-col>
        <el-col :span="18">
          <el-input v-model="formList.hzNum" placeholder="请输入"></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="5">币logo</el-col>
        <el-col :span="18">
          <el-upload
            class="upload-demo"
            action="https://up-z2.qiniup.com"
            :data="QnFileForm"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="queryinfo.imgList"
          >
            <el-button size="small" type="primary">点击上传图片</el-button>
            <div slot="tip" class="el-upload__tip">上传图片，且不超过500kb</div>
          </el-upload>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 币单价</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tokenPrice"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 是否在链上</el-col>
        <el-col :span="18">
          <el-switch
            v-model="formList.isL"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">外部是否可提</el-col>
        <el-col :span="18">
          <el-switch
            v-model="formList.isTb"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="5"> 提币地址(请联系管理员)</el-col>
        <el-col :span="18">
          <el-input
          disabled
            v-model="formList.tbAddress"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row> -->
      <!-- <el-row :gutter="20">
        <el-col :span="5">提币私匙(请联系管理员)</el-col>
        <el-col :span="18">
          <el-input disabled v-model="formList.tbKey" placeholder="请输入"></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="5">提到外部的手续费</el-col>
        <el-col :span="18">
          <el-input v-model="formList.tbSxf" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-alert title="提示：1：%，0：固定值" type="success"> </el-alert>
      <el-row :gutter="20">
        <el-col :span="5">外部手续费类型</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tbSxfType"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">内部是否可提</el-col>
        <el-col :span="18">
          <el-switch
            v-model="formList.isNbTb"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 提到内部的手续费</el-col>
        <el-col :span="18">
          <el-input v-model="formList.nbSxf" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-alert title="提示：1：%，0：固定值" type="success"> </el-alert>
      <el-row :gutter="20">
        <el-col :span="5">内部手续费类型</el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.nbSxfType"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">自动提币审核的额度 </el-col>
        <el-col :span="18">
          <el-input v-model="formList.zdShNum" placeholder="请输入"></el-input>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="5">单价单位</el-col>
        <el-col :span="18">
          <el-select v-model="formList.tokenPriceUnit" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"> 提币时间段</el-col>
        <el-col :span="18">
          <el-input v-model="formList.tbTime" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">提币最小最大值 </el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tbInterval"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">币涨幅 </el-col>
        <el-col :span="18">
          <el-input
            v-model="formList.tokenGains"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formList: {
        tokenEn: null,
        status: null,
        hzAddress: null,
        contactAddress: null,
        methodId: null,
        unit: null,
        hzNum: null,
        tokenLogo: null,
        tokenPrice: null,
        isTb: null,
        tbAddress: null,
        tbKey: null,
        isL: null,
        tbSxf: null,
        nbSxf: null,
        zdShNum: null,
        tokenPriceUnit: null,
        tbTime: null,
        tbInterval: null,
        tokenGains: null,
        tbSxfType: null,
        isNbTb: null,
        nbSxfType: null,
      },
      QnFileForm: {
        key: "",
        token: "",
      },
      queryinfo: {
        userTel: "",
        userEmail: "",
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      dialogTableVisible: false,
      AdddialogTableVisible: false,
      gridData: [],
      gridData1: [],
      options: [
        {
          value: "CNY",
          label: "CNY",
        },
        {
          value: "USDT",
          label: "USDT",
        },
      ],
    };
  },
  created() {
    this.getmsgList();
  },
  mounted() {
    this.getToken();
  },
  methods: {
    // 关闭对话框
    colseDialog() {
      this.formList.tokenEn = "";
      this.formList.status = "";
      this.formList.hzAddress = "";
      this.formList.contactAddress = "";
      this.formList.methodId = "";
      this.formList.unit = "";
      this.formList.hzNum = "";
      this.formList.tokenLogo = "";
      this.formList.tokenPrice = "";
      this.formList.isTb = "";
      this.formList.tbAddress = "";
      this.formList.tbKey = "";
      this.formList.isL = "";
      this.formList.tbSxf = "";
      this.formList.nbSxf = "";
      this.formList.zdShNum = "";
      this.formList.tokenPriceUnit = "";
      this.formList.tbTime = "";
      this.formList.tbInterval = "";
      this.formList.tokenGains = "";
      this.formList.tbSxfType = "";
      this.formList.isNbTb = "";
      this.formList.nbSxfType = "";
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 获取上传文件名并编辑
    beforeUpload(file) {
      let fileName = file.name;
      this.QnFileForm.key = new Date().getTime() + fileName;
    },
    // 上传成功获取七牛云链接地址
    uploadSuccess() {
      this.formList.tokenLogo = "http://thap.bee360.com.cn/" + this.QnFileForm.key; //七牛图片地址
    },
    // 提示上传文件数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前只限制选择 1 个文件`);
    },
    // 移除上传文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //删除图片
    async Delete(id, status) {
      this.DeleteInfo.id = id;
      if (status) {
        this.DeleteInfo.status = false;
      } else {
        this.DeleteInfo.status = true;
      }
      const { data: res } = await this.$http.post(
        "currencyAudit/updateSxyList",
        this.httputil(this.DeleteInfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getmsglist();
    },
    // 新增添加文件
    async putGoodsList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/addSxyList",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getmsglist();
      this.dialogTableVisible1 = false;
      this.queryinfo.type = "";
    },
    // 添加币种
    async AddCoin(row) {
      this.AdddialogTableVisible = true;
    },
    // 修改币信息
    async changeCoin(row) {
      this.dialogTableVisible = true;
      this.formList = row;
    },
    // 添加币种
    async Addsubmit() {
      const { data: res } = await this.$http.post(
        "currencyAudit/addCoin",
        this.httputil(this.formList)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getmsgList();
      this.AdddialogTableVisible = false;
      // this.formList={}
    },

    // 修改币种
    async submit() {
      const { data: res } = await this.$http.post(
        "currencyAudit/updateCoin",
        this.httputil(this.formList)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.getmsgList();
      this.dialogTableVisible = false;
    },

    // 获取收益记录列表
    async getmsgList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getCoinListm",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data;
      this.total = res.data.count;
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getmsgList();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryinfo.pageIndex = newCurrent;
      this.getmsgList();
    },
    //页面加载完成后获取tokend
    async getToken() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getQiniuToken"
      );
      if (res.code !== 200) return this.$message.error("获取失败");
      this.QnFileForm.token = res.data.uptoken;
    },
  },
};
</script>
<style lang="less" scope>
.el-row {
  margin: 15px 0;
}
</style>
